<template>
    <ScaleView :width="1920" :height="1080" ref="containerRef">
        <img class="decorator" src="./assets/bg.svg" alt="">
        <Header @switch-fullscreen="switchFullscreen" @select:village="villageChanged"></Header>
        <slot v-if="data.reloadFlag"></slot>
        <Footer></Footer>
    </ScaleView>
</template>

<script lang="ts" setup>
import { computed, nextTick, provide, reactive, ref } from "vue";
import ScaleView from "../../shared/ScaleView.vue";
import Header from "./Header.vue";
import Footer from "./Footer.vue";
const data = reactive({
    reloadFlag: true,
    villageId: ''
})
const containerRef = ref<InstanceType<typeof ScaleView>>()

provide('villageId', computed(() => data.villageId))

function switchFullscreen() {
            if (!document.fullscreenEnabled) {
                return alert('您的浏览器不支持或禁用了全屏功能')
            } else if (document.fullscreenElement) {
                document.exitFullscreen()
            } else {
                containerRef.value?.$el.requestFullscreen()
            }
        }
function villageChanged(village: any) {
    data.villageId = village.villageId
    data.reloadFlag = false
    nextTick(() => data.reloadFlag = true)
}

</script>

<style scoped>
.decorator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

 .scale-view  > :deep .content{
    background: #02050E;
}
</style>